<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>动态详情 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f7;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1d1d1f;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      color: #1d1d1f;
      font-size: 20px;
    }
    
    /* 动态容器 */
    .post-container {
      background-color: white;
      margin-bottom: 10px;
    }
    
    /* 动态头部 */
    .post-header {
      padding: 15px 15px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .user-info {
      display: flex;
      align-items: center;
    }
    
    .user-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .user-name {
      font-weight: 600;
      font-size: 16px;
    }
    
    .post-time {
      font-size: 12px;
      color: #8e8e93;
      margin-top: 2px;
    }
    
    .more-options {
      color: #8e8e93;
      background: none;
      border: none;
      font-size: 18px;
    }
    
    /* 动态内容 */
    .post-content {
      padding: 0 15px 15px;
      font-size: 16px;
      line-height: 1.5;
    }
    
    .post-content .hashtag {
      color: #007aff;
    }
    
    /* 动态媒体 */
    .post-media {
      width: 100%;
      margin-bottom: 15px;
    }
    
    .post-media img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    .post-media.multi-image {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 2px;
    }
    
    /* 动态底部操作 */
    .post-actions {
      padding: 5px 15px 15px;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #eee;
      margin: 0 15px;
    }
    
    .action-button {
      display: flex;
      align-items: center;
      color: #8e8e93;
      background: none;
      border: none;
      font-size: 15px;
      padding: 5px 10px;
    }
    
    .action-button i {
      font-size: 20px;
      margin-right: 8px;
    }
    
    .action-button.liked {
      color: #ff3b30;
    }
    
    /* 点赞列表 */
    .likes-list {
      padding: 0 15px 10px;
      display: flex;
      align-items: center;
    }
    
    .likes-avatars {
      display: flex;
    }
    
    .likes-avatars img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 2px solid white;
      margin-left: -8px;
    }
    
    .likes-avatars img:first-child {
      margin-left: 0;
    }
    
    .likes-text {
      margin-left: 10px;
      font-size: 14px;
      flex: 1;
    }
    
    .likes-text span {
      font-weight: 600;
    }
    
    /* 评论区 */
    .comments-section {
      background-color: white;
      padding: 15px;
      margin-bottom: 10px;
    }
    
    .comments-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
    }
    
    .comments-title i {
      margin-right: 8px;
      color: #8e8e93;
    }
    
    /* 评论项 */
    .comment-item {
      display: flex;
      margin-bottom: 18px;
    }
    
    .comment-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
      flex-shrink: 0;
    }
    
    .comment-content {
      background-color: #f0f0f0;
      padding: 10px 12px;
      border-radius: 18px;
      max-width: calc(100% - 46px);
    }
    
    .comment-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    
    .comment-author {
      font-weight: 600;
      font-size: 14px;
    }
    
    .comment-time {
      font-size: 12px;
      color: #8e8e93;
      margin-left: 8px;
    }
    
    .comment-text {
      font-size: 14px;
      line-height: 1.4;
    }
    
    .comment-actions {
      display: flex;
      margin-top: 6px;
      font-size: 12px;
    }
    
    .comment-action {
      color: #8e8e93;
      background: none;
      border: none;
      padding: 0 5px 0 0;
      margin-right: 10px;
      display: flex;
      align-items: center;
    }
    
    .comment-action i {
      margin-right: 3px;
      font-size: 12px;
    }
    
    .comment-action.liked {
      color: #ff3b30;
    }
    
    /* 回复 */
    .replies {
      margin-left: 46px;
      margin-top: 10px;
    }
    
    .reply-item {
      display: flex;
      margin-bottom: 10px;
    }
    
    .reply-to {
      color: #007aff;
      font-weight: 600;
    }
    
    /* 评论输入框 */
    .comment-input-container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      padding: 10px 15px;
      display: flex;
      align-items: center;
      border-top: 1px solid #eee;
      z-index: 90;
    }
    
    .comment-input {
      flex: 1;
      background-color: #f0f0f0;
      border-radius: 20px;
      padding: 10px 15px;
      font-size: 14px;
      border: none;
      outline: none;
      margin: 0 10px;
    }
    
    .input-actions {
      display: flex;
    }
    
    .input-action {
      color: #8e8e93;
      background: none;
      border: none;
      font-size: 20px;
      margin-left: 8px;
    }
    
    .send-comment {
      color: #007aff;
      font-size: 16px;
      font-weight: 600;
    }
    
    /* 回复输入框 */
    .reply-input-container {
      display: flex;
      margin-left: 46px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    
    .reply-input {
      flex: 1;
      background-color: #f0f0f0;
      border-radius: 20px;
      padding: 8px 12px;
      font-size: 14px;
      border: none;
      outline: none;
    }
    
    /* 加载更多评论 */
    .load-more-comments {
      text-align: center;
      padding: 8px;
      color: #007aff;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav">
    <button class="btn btn-link p-0 nav-btn" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">动态详情</h1>
    <button class="btn btn-link p-0 nav-btn">
      <i class="fa fa-share-alt"></i>
    </button>
  </div>
  
  <!-- 动态内容 -->
  <div class="post-container">
    <div class="post-header">
      <div class="user-info">
        <img src="https://picsum.photos/100/100?random=11" alt="用户头像" class="user-avatar">
        <div>
          <div class="user-name">李华</div>
          <div class="post-time">昨天 19:45 · 咖啡馆</div>
        </div>
      </div>
      <button class="more-options">
        <i class="fa fa-ellipsis-h"></i>
      </button>
    </div>
    
    <div class="post-content">
      周末探店成功！这家咖啡馆的提拉米苏简直绝了，环境也超赞，适合拍照📸 推荐给大家~ <span class="hashtag">#美食#</span> <span class="hashtag">#探店#</span> <span class="hashtag">#周末去哪儿#</span>
    </div>
    
    <div class="post-media">
      <img src="https://picsum.photos/800/600?random=20" alt="咖啡馆照片">
    </div>
    
    <div class="post-actions">
      <button class="action-button like-btn">
        <i class="fa fa-heart-o"></i>
        <span>点赞 (28)</span>
      </button>
      <button class="action-button comment-btn">
        <i class="fa fa-comment-o"></i>
        <span>评论 (12)</span>
      </button>
      <button class="action-button share-btn">
        <i class="fa fa-share"></i>
        <span>分享</span>
      </button>
    </div>
    
    <div class="likes-list">
      <div class="likes-avatars">
        <img src="https://picsum.photos/100/100?random=10" alt="点赞用户1">
        <img src="https://picsum.photos/100/100?random=12" alt="点赞用户2">
        <img src="https://picsum.photos/100/100?random=13" alt="点赞用户3">
      </div>
      <div class="likes-text">
        <span>张小明</span>、<span>王芳</span> 和 <span>26</span> 其他人点赞
      </div>
    </div>
  </div>
  
  <!-- 评论区 -->
  <div class="comments-section">
    <div class="comments-title">
      <i class="fa fa-comments-o"></i> 全部评论
    </div>
    
    <!-- 评论1 -->
    <div class="comment-item">
      <img src="https://picsum.photos/100/100?random=14" alt="评论者头像" class="comment-avatar">
      <div class="comment-content">
        <div class="comment-header">
          <span class="comment-author">陈静</span>
          <span class="comment-time">昨天 20:15</span>
        </div>
        <div class="comment-text">
          这是哪家呀？看起来好棒！位置在哪里呀？
        </div>
        <div class="comment-actions">
          <button class="comment-action like-btn">
            <i class="fa fa-heart-o"></i> 5
          </button>
          <button class="comment-action reply-btn" data-author="陈静">
            <i class="fa fa-reply"></i> 回复
          </button>
        </div>
        
        <!-- 回复 -->
        <div class="replies">
          <div class="reply-item">
            <img src="https://picsum.photos/100/100?random=11" alt="回复者头像" class="comment-avatar">
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">李华</span>
                <span class="comment-time">昨天 20:30</span>
              </div>
              <div class="comment-text">
                <span class="reply-to">回复 陈静</span> downtown的"街角咖啡"，就在图书馆旁边，很好找的
              </div>
              <div class="comment-actions">
                <button class="comment-action like-btn">
                  <i class="fa fa-heart-o"></i> 2
                </button>
                <button class="comment-action reply-btn" data-author="李华">
                  <i class="fa fa-reply"></i> 回复
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 回复输入框 (默认隐藏) -->
        <div class="reply-input-container" style="display: none;">
          <input type="text" class="reply-input" placeholder="回复 @陈静...">
          <button class="btn btn-link send-reply">
            <i class="fa fa-paper-plane-o" style="color: #007aff;"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 评论2 -->
    <div class="comment-item">
      <img src="https://picsum.photos/100/100?random=15" alt="评论者头像" class="comment-avatar">
      <div class="comment-content">
        <div class="comment-header">
          <span class="comment-author">刘强</span>
          <span class="comment-time">昨天 21:05</span>
        </div>
        <div class="comment-text">
          他们家的手冲咖啡也很赞！上次去尝试了耶加雪菲，果香很浓郁
        </div>
        <div class="comment-actions">
          <button class="comment-action like-btn">
            <i class="fa fa-heart-o"></i> 8
          </button>
          <button class="comment-action reply-btn" data-author="刘强">
            <i class="fa fa-reply"></i> 回复
          </button>
        </div>
        
        <!-- 回复输入框 (默认隐藏) -->
        <div class="reply-input-container" style="display: none;">
          <input type="text" class="reply-input" placeholder="回复 @刘强...">
          <button class="btn btn-link send-reply">
            <i class="fa fa-paper-plane-o" style="color: #007aff;"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 评论3 -->
    <div class="comment-item">
      <img src="https://picsum.photos/100/100?random=16" alt="评论者头像" class="comment-avatar">
      <div class="comment-content">
        <div class="comment-header">
          <span class="comment-author">赵伟</span>
          <span class="comment-time">今天 09:22</span>
        </div>
        <div class="comment-text">
          看起来真不错，周末约上朋友去试试！请问需要提前预定吗？
        </div>
        <div class="comment-actions">
          <button class="comment-action like-btn">
            <i class="fa fa-heart-o"></i> 3
          </button>
          <button class="comment-action reply-btn" data-author="赵伟">
            <i class="fa fa-reply"></i> 回复
          </button>
        </div>
        
        <!-- 回复 -->
        <div class="replies">
          <div class="reply-item">
            <img src="https://picsum.photos/100/100?random=11" alt="回复者头像" class="comment-avatar">
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">李华</span>
                <span class="comment-time">今天 10:05</span>
              </div>
              <div class="comment-text">
                <span class="reply-to">回复 赵伟</span> 周末人会比较多，最好提前打电话预定一下窗边的位置，拍照超好看
              </div>
              <div class="comment-actions">
                <button class="comment-action like-btn">
                  <i class="fa fa-heart-o"></i> 1
                </button>
                <button class="comment-action reply-btn" data-author="李华">
                  <i class="fa fa-reply"></i> 回复
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 回复输入框 (默认隐藏) -->
        <div class="reply-input-container" style="display: none;">
          <input type="text" class="reply-input" placeholder="回复 @赵伟...">
          <button class="btn btn-link send-reply">
            <i class="fa fa-paper-plane-o" style="color: #007aff;"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 加载更多评论 -->
    <div class="load-more-comments" id="loadMoreComments">
      查看更多评论
    </div>
  </div>
  
  <!-- 评论输入框 -->
  <div class="comment-input-container">
    <button class="input-action">
      <i class="fa fa-smile-o"></i>
    </button>
    <input type="text" class="comment-input" placeholder="添加评论...">
    <div class="input-actions">
      <button class="input-action">
        <i class="fa fa-picture-o"></i>
      </button>
      <button class="btn btn-link send-comment">发送</button>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 点赞功能
    document.querySelectorAll('.like-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        const text = this.textContent.trim();
        
        // 处理动态点赞
        if (this.closest('.post-actions')) {
          if (icon.classList.contains('fa-heart-o')) {
            icon.classList.remove('fa-heart-o');
            icon.classList.add('fa-heart');
            this.classList.add('liked');
            
            // 更新点赞数
            let countMatch = text.match(/\d+/);
            if (countMatch) {
              let newCount = parseInt(countMatch[0]) + 1;
              this.innerHTML = '<i class="fa fa-heart"></i> <span>点赞 (' + newCount + ')</span>';
              
              // 更新点赞列表
              addToLikesList();
            }
          } else {
            icon.classList.remove('fa-heart');
            icon.classList.add('fa-heart-o');
            this.classList.remove('liked');
            
            // 更新点赞数
            let countMatch = text.match(/\d+/);
            if (countMatch) {
              let newCount = parseInt(countMatch[0]) - 1;
              this.innerHTML = '<i class="fa fa-heart-o"></i> <span>点赞 (' + newCount + ')</span>';
              
              // 从点赞列表移除
              removeFromLikesList();
            }
          }
        } 
        // 处理评论点赞
        else if (this.closest('.comment-actions')) {
          if (icon.classList.contains('fa-heart-o')) {
            icon.classList.remove('fa-heart-o');
            icon.classList.add('fa-heart');
            this.classList.add('liked');
            
            // 更新点赞数
            let countMatch = text.match(/\d+/);
            if (countMatch) {
              let newCount = parseInt(countMatch[0]) + 1;
              this.innerHTML = '<i class="fa fa-heart"></i> ' + newCount;
            }
          } else {
            icon.classList.remove('fa-heart');
            icon.classList.add('fa-heart-o');
            this.classList.remove('liked');
            
            // 更新点赞数
            let countMatch = text.match(/\d+/);
            if (countMatch) {
              let newCount = parseInt(countMatch[0]) - 1;
              this.innerHTML = '<i class="fa fa-heart-o"></i> ' + newCount;
            }
          }
        }
      });
    });
    
    // 添加到点赞列表
    function addToLikesList() {
      const likesAvatars = document.querySelector('.likes-avatars');
      const likesText = document.querySelector('.likes-text');
      
      // 添加自己的头像到点赞列表最前面
      const myAvatar = document.createElement('img');
      myAvatar.src = 'https://picsum.photos/100/100?random=99';
      myAvatar.alt = '我的头像';
      myAvatar.style.marginLeft = '0';
      
      // 将现有头像的marginLeft调整
      const existingAvatars = likesAvatars.querySelectorAll('img');
      existingAvatars.forEach(avatar => {
        avatar.style.marginLeft = '-8px';
      });
      
      likesAvatars.insertBefore(myAvatar, likesAvatars.firstChild);
      
      // 更新点赞文字
      let text = likesText.innerHTML;
      text = text.replace('和 26 其他人', '、我和 25 其他人');
      likesText.innerHTML = text;
    }
    
    // 从点赞列表移除
    function removeFromLikesList() {
      const likesAvatars = document.querySelector('.likes-avatars');
      const likesText = document.querySelector('.likes-text');
      
      // 移除自己的头像
      const myAvatar = likesAvatars.querySelector('img[alt="我的头像"]');
      if (myAvatar) {
        likesAvatars.removeChild(myAvatar);
        
        // 调整第一个头像的margin
        const firstAvatar = likesAvatars.querySelector('img:first-child');
        if (firstAvatar) {
          firstAvatar.style.marginLeft = '0';
        }
        
        // 更新点赞文字
        let text = likesText.innerHTML;
        text = text.replace('、我和 25 其他人', '和 26 其他人');
        likesText.innerHTML = text;
      }
    }
    
    // 回复功能
    document.querySelectorAll('.reply-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 隐藏所有回复输入框
        document.querySelectorAll('.reply-input-container').forEach(container => {
          container.style.display = 'none';
        });
        
        // 显示当前评论的回复输入框
        const author = this.getAttribute('data-author');
        const replyContainer = this.closest('.comment-content').querySelector('.reply-input-container');
        const replyInput = replyContainer.querySelector('.reply-input');
        
        replyInput.placeholder = `回复 @${author}...`;
        replyContainer.style.display = 'flex';
        replyInput.focus();
      });
    });
    
    // 发送回复
    document.querySelectorAll('.send-reply').forEach(btn => {
      btn.addEventListener('click', function() {
        const replyContainer = this.closest('.reply-input-container');
        const replyInput = replyContainer.querySelector('.reply-input');
        const replyText = replyInput.value.trim();
        
        if (replyText) {
          // 获取回复对象
          const placeholder = replyInput.placeholder;
          const match = placeholder.match(/@(.*?).../);
          const replyTo = match ? match[1] : '';
          
          // 创建新回复元素
          const repliesContainer = this.closest('.comment-content').querySelector('.replies') || 
                                 this.closest('.comment-content').querySelector('.comment-actions').insertAdjacentElement('afterend', document.createElement('div'));
          
          if (!this.closest('.comment-content').querySelector('.replies')) {
            repliesContainer.className = 'replies';
          }
          
          const now = new Date();
          const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
          
          const newReply = document.createElement('div');
          newReply.className = 'reply-item';
          newReply.innerHTML = `
            <img src="https://picsum.photos/100/100?random=99" alt="我的头像" class="comment-avatar">
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">我</span>
                <span class="comment-time">刚刚</span>
              </div>
              <div class="comment-text">
                <span class="reply-to">回复 ${replyTo}</span> ${replyText}
              </div>
              <div class="comment-actions">
                <button class="comment-action like-btn">
                  <i class="fa fa-heart-o"></i> 0
                </button>
                <button class="comment-action reply-btn" data-author="${replyTo}">
                  <i class="fa fa-reply"></i> 回复
                </button>
              </div>
            </div>
          `;
          
          // 添加新回复
          repliesContainer.appendChild(newReply);
          
          // 清空并隐藏回复框
          replyInput.value = '';
          replyContainer.style.display = 'none';
          
          // 为新回复绑定事件
          bindNewReplyEvents(newReply);
          
          // 更新评论数
          updateCommentCount(1);
        }
      });
    });
    
    // 绑定新回复的事件
    function bindNewReplyEvents(replyElement) {
      // 点赞事件
      const likeBtn = replyElement.querySelector('.like-btn');
      likeBtn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        const text = this.textContent.trim();
        
        if (icon.classList.contains('fa-heart-o')) {
          icon.classList.remove('fa-heart-o');
          icon.classList.add('fa-heart');
          this.classList.add('liked');
          this.innerHTML = '<i class="fa fa-heart"></i> 1';
        } else {
          icon.classList.remove('fa-heart');
          icon.classList.add('fa-heart-o');
          this.classList.remove('liked');
          this.innerHTML = '<i class="fa fa-heart-o"></i> 0';
        }
      });
      
      // 回复事件
      const replyBtn = replyElement.querySelector('.reply-btn');
      replyBtn.addEventListener('click', function() {
        // 隐藏所有回复输入框
        document.querySelectorAll('.reply-input-container').forEach(container => {
          container.style.display = 'none';
        });
        
        // 显示对应的回复输入框
        const author = this.getAttribute('data-author');
        const replyContainer = this.closest('.comment-content').querySelector('.reply-input-container');
        const replyInput = replyContainer.querySelector('.reply-input');
        
        replyInput.placeholder = `回复 @${author}...`;
        replyContainer.style.display = 'flex';
        replyInput.focus();
      });
    }
    
    // 发送评论
    document.querySelector('.send-comment').addEventListener('click', function() {
      const commentInput = document.querySelector('.comment-input');
      const commentText = commentInput.value.trim();
      
      if (commentText) {
        const commentsSection = document.querySelector('.comments-section');
        const loadMore = document.getElementById('loadMoreComments');
        
        // 创建新评论
        const newComment = document.createElement('div');
        newComment.className = 'comment-item';
        newComment.innerHTML = `
          <img src="https://picsum.photos/100/100?random=99" alt="我的头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">我</span>
              <span class="comment-time">刚刚</span>
            </div>
            <div class="comment-text">
              ${commentText}
            </div>
            <div class="comment-actions">
              <button class="comment-action like-btn">
                <i class="fa fa-heart-o"></i> 0
              </button>
              <button class="comment-action reply-btn" data-author="我">
                <i class="fa fa-reply"></i> 回复
              </button>
            </div>
            
            <!-- 回复输入框 (默认隐藏) -->
            <div class="reply-input-container" style="display: none;">
              <input type="text" class="reply-input" placeholder="回复 @我...">
              <button class="btn btn-link send-reply">
                <i class="fa fa-paper-plane-o" style="color: #007aff;"></i>
              </button>
            </div>
          </div>
        `;
        
        // 插入新评论到最前面
        commentsSection.insertBefore(newComment, commentsSection.querySelector('.comment-item'));
        
        // 清空输入框
        commentInput.value = '';
        
        // 为新评论绑定事件
        bindNewCommentEvents(newComment);
        
        // 更新评论数
        updateCommentCount(1);
      }
    });
    
    // 绑定新评论的事件
    function bindNewCommentEvents(commentElement) {
      // 点赞事件
      const likeBtn = commentElement.querySelector('.like-btn');
      likeBtn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        
        if (icon.classList.contains('fa-heart-o')) {
          icon.classList.remove('fa-heart-o');
          icon.classList.add('fa-heart');
          this.classList.add('liked');
          this.innerHTML = '<i class="fa fa-heart"></i> 1';
        } else {
          icon.classList.remove('fa-heart');
          icon.classList.add('fa-heart-o');
          this.classList.remove('liked');
          this.innerHTML = '<i class="fa fa-heart-o"></i> 0';
        }
      });
      
      // 回复事件
      const replyBtn = commentElement.querySelector('.reply-btn');
      replyBtn.addEventListener('click', function() {
        // 隐藏所有回复输入框
        document.querySelectorAll('.reply-input-container').forEach(container => {
          container.style.display = 'none';
        });
        
        // 显示当前评论的回复输入框
        const author = this.getAttribute('data-author');
        const replyContainer = this.closest('.comment-content').querySelector('.reply-input-container');
        const replyInput = replyContainer.querySelector('.reply-input');
        
        replyInput.placeholder = `回复 @${author}...`;
        replyContainer.style.display = 'flex';
        replyInput.focus();
        
        // 为新回复按钮绑定事件
        const sendReplyBtn = replyContainer.querySelector('.send-reply');
        sendReplyBtn.addEventListener('click', function() {
          const replyText = replyInput.value.trim();
          
          if (replyText) {
            // 创建回复容器
            const repliesContainer = document.createElement('div');
            repliesContainer.className = 'replies';
            this.closest('.comment-content').insertBefore(repliesContainer, replyContainer);
            
            // 创建新回复
            const newReply = document.createElement('div');
            newReply.className = 'reply-item';
            newReply.innerHTML = `
              <img src="https://picsum.photos/100/100?random=99" alt="我的头像" class="comment-avatar">
              <div class="comment-content">
                <div class="comment-header">
                  <span class="comment-author">我</span>
                  <span class="comment-time">刚刚</span>
                </div>
                <div class="comment-text">
                  <span class="reply-to">回复 ${author}</span> ${replyText}
                </div>
                <div class="comment-actions">
                  <button class="comment-action like-btn">
                    <i class="fa fa-heart-o"></i> 0
                  </button>
                  <button class="comment-action reply-btn" data-author="${author}">
                    <i class="fa fa-reply"></i> 回复
                  </button>
                </div>
              </div>
            `;
            
            repliesContainer.appendChild(newReply);
            
            // 清空并隐藏回复框
            replyInput.value = '';
            replyContainer.style.display = 'none';
            
            // 为新回复绑定事件
            bindNewReplyEvents(newReply);
            
            // 更新评论数
            updateCommentCount(1);
          }
        });
      });
    }
    
    // 更新评论数
    function updateCommentCount(change) {
      const commentBtn = document.querySelector('.comment-btn span');
      let countMatch = commentBtn.textContent.match(/\d+/);
      
      if (countMatch) {
        let newCount = parseInt(countMatch[0]) + change;
        commentBtn.textContent = `评论 (${newCount})`;
      }
    }
    
    // 加载更多评论
    document.getElementById('loadMoreComments').addEventListener('click', function() {
      this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        const commentsSection = document.querySelector('.comments-section');
        
        // 添加更多评论
        for (let i = 0; i < 2; i++) {
          const randomId = Math.floor(Math.random() * 100);
          const randomLikes = Math.floor(Math.random() * 10);
          const randomHours = Math.floor(Math.random() * 24);
          
          const newComment = document.createElement('div');
          newComment.className = 'comment-item';
          newComment.innerHTML = `
            <img src="https://picsum.photos/100/100?random=${randomId}" alt="评论者头像" class="comment-avatar">
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">用户${randomId}</span>
                <span class="comment-time">昨天 ${randomHours}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}</span>
              </div>
              <div class="comment-text">
                这家店我也去过，确实很不错，环境很安静，适合朋友小聚或者工作
              </div>
              <div class="comment-actions">
                <button class="comment-action like-btn">
                  <i class="fa fa-heart-o"></i> ${randomLikes}
                </button>
                <button class="comment-action reply-btn" data-author="用户${randomId}">
                  <i class="fa fa-reply"></i> 回复
                </button>
              </div>
              
              <!-- 回复输入框 (默认隐藏) -->
              <div class="reply-input-container" style="display: none;">
                <input type="text" class="reply-input" placeholder="回复 @用户${randomId}...">
                <button class="btn btn-link send-reply">
                  <i class="fa fa-paper-plane-o" style="color: #007aff;"></i>
                </button>
              </div>
            </div>
          `;
          
          // 插入新评论
          commentsSection.insertBefore(newComment, this);
          
          // 绑定事件
          bindNewCommentEvents(newComment);
        }
        
        // 更新按钮文本
        this.textContent = '没有更多评论了';
        this.style.color = '#8e8e93';
        this.style.cursor = 'default';
      }, 1500);
    });
    
    // 更多选项按钮
    document.querySelector('.more-options').addEventListener('click', function() {
      alert('动态操作：举报、收藏、不看他的动态、屏蔽');
    });
    
    // 分享按钮
    document.querySelector('.top-nav .fa-share-alt').parentElement.addEventListener('click', function() {
      alert('分享到：微信好友、朋友圈、微博、QQ好友、QQ空间');
    });
    
    // 评论框获取焦点时显示发送按钮
    document.querySelector('.comment-input').addEventListener('input', function() {
      const sendBtn = document.querySelector('.send-comment');
      if (this.value.trim()) {
        sendBtn.style.opacity = '1';
        sendBtn.style.pointerEvents = 'auto';
      } else {
        sendBtn.style.opacity = '0.5';
        sendBtn.style.pointerEvents = 'none';
      }
    });
  </script>
</body>
</html>
